<template>
    <div class="detail">
        <el-card class="item" v-for="cont in pageInfo" :key="cont.id">
<!--            -->
            <a :href="hre" target="_blank" class="item" @click="toVideo(cont)">
                <div class="bg" :style="`background-image: url(${cont.cover[0]})`">
                    <img class="img" src="https://rs.dance365.com/img/release_play@3x.fb313c4d.png"/>
                    <span class="text">视频课</span>
                </div>
                <div class="main">
                    <div class="top">
                        <a class="context">{{cont.title}}</a>
                        <div class="prop">
                            <!--                                onSalesBackup打折后的钱-->
                            <span class="price" style="color: #fa5e9d">￥{{cont.commodityBackup?.price}}.00</span>
                            <span class="watch">{{cont.statisticsBackup.viewCount>10000?(cont.statisticsBackup.viewCount/10000).toFixed(1)+'w':cont.statisticsBackup.viewCount}}人浏览</span>
                        </div>
                        <div class="desc">
                                <span class="vip">
                                    <span></span>
                                </span>
                            <span class="icon">
                                    <el-icon size="14"><Pointer /></el-icon>
                                    <span>{{cont.statisticsBackup.praiseCount}}</span>
                                </span>
                            <span class="icon">
                                    <el-icon><ChatDotRound /></el-icon>
                                    <span>{{cont.statisticsBackup.commentCount}}</span>
                                </span>
                            <span class="icon">
                                    <el-icon><Star /></el-icon>
                                    <span>{{cont.statisticsBackup.favoriteCount}}</span>
                                </span>
                        </div>
                    </div>
                    <div class="bottom">
                        <div class="left">
                            <div class="bgImg" :style="`background-image: url(${cont.creatorBackup.avatar})`" ></div>
                            <span class="text">{{cont.creatorBackup.name}}</span>
                            <!--                                类型"supplier"-->
                            <img class="img"
                                 :src="cont.creatorBackup.certificationType=='personal'?'https://rs.dance365.com/authenticate_personal@3x.png':'https://rs.dance365.com/authenticate_organ@3x.png'"/>
                        </div>
                        <span class="right" title="2020年09月07日">
                                <time class="uploadTime">{{getTime(cont.updateTime)}}</time>
                            </span>
                    </div>
                </div>
            </a>
        </el-card>

    </div>
</template>

<script setup lang="ts">
import {defineProps,ref} from "vue";
import type {zoneList,pageList} from '@/api/course/course'
import {useRouter,useRoute} from 'vue-router'
import moment from "moment";
const router=useRouter()
const route=useRoute()
const getTime = (time:number) => {
    return moment(time).format("YY-MM-DD");
};
const props=defineProps<{
    pageInfo:pageList[]
}>()
const hre=ref('https:')
const toVideo=(rout:any)=>{
    let href=rout.router.split(':')[1]
    hre.value=hre.value+href
}
</script>

<style lang="less" scoped>
.detail{
    width: 1200px;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    align-content:flex-start;
    .item:nth-child(5n+5){
        margin-right: 0;
    }
    .item{
        margin-top: 15px;
        margin-right: 20px;
        width: 224px;
        height:300px;
        &:hover{
            .bg{
                opacity:0.5;
            }
        }
        .bg{
            width: 100%;
            height:125px;
            background-position: 50%;
            position: relative;
            background-size: cover;

            .img{
                width: 30px;
                height:30px;
                position: absolute;
                bottom: 15px;
                left:20px;
            }
            .text{
                margin-top: 5px;
                height: 24px;
                line-height: 24px;
                font-size: 12px;
                padding:0 10px;
                border-radius: 10px;
                color: white;
                background-color: black;
                position: absolute;
                bottom: 15px;
                right: 15px;

            }
        }
        .main{
            font-size: 14px;
            color: #111;
            padding-top: 10px;
            padding-bottom: 0;
            line-height: 18px;
            height: 45px;
            width: 100%;
            .top{
                width: 100%;
                height: 104px;
                border-bottom: 1px solid black;
                padding: 0 10px 13px;
                .context{
                    height: 37px;
                    color: inherit;
                    text-decoration: none;
                    word-break: break-all;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                }
                .prop{
                    margin-top: 5px;
                    display: flex;
                    -webkit-box-pack: justify;
                    justify-content: space-between;
                    -webkit-box-align: center;
                    align-items: center;
                }
                .desc{
                    margin-top: 5px;
                    width: 224px;
                    height: 50px;
                    display: flex;

                    -webkit-box-align: center;
                    position: relative;
                    align-items: center;
                    -webkit-box-pack: justify;
                    font-size: 12px;
                    .vip{
                        position: absolute;
                        left: 0;
                        top: -6px;
                        display: inline-block;
                        width: 38px;
                        height: 14px;
                        background: url(https://rs.dance365.com/vip_free@3x.png);
                        background-size: cover;
                    }
                    .icon{
                        font-size: 14px;
                        margin-right: 10px;
                        color: #b1b5c1;
                    }
                }
            }
        }
    }

    .bottom{
        display: flex;
        margin-top: 10px;
        -webkit-box-pack: justify;
        position: relative;
        align-items: center;
        font-size: 12px;
        box-sizing: border-box;

        .left{
            display: flex;
            -webkit-box-align: center;
            align-items: center;
            .bgImg{
                width: 24px;
                height: 24px;
                background-image: url("https://rs.dance365.com/photo/e5618c52-ddfc-412b-9a83-7eb1242b2698.jpg?imageView2/0/w/100/h/100/format/webp/ignore-error/1");
                background-size: cover;
                background-position: 50%;
                border-radius: 50%;
            }
            .text{
                width: 68px;
                color: #111;
                cursor: pointer;
                margin-left: 8px;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                margin-right: 5px;
                text-overflow:ellipsis;
            }
            .img{
                width: 12px;
                height:12px;
            }
        }
        .right{
            position: absolute;
            right: 0;
        }
    }
}

</style>
